var indexHover = (function() {
    /* var listP = document.querySelector(".header .center");
    var currentL = document.querySelector(".header .center .on");
    var hover = document.querySelector(".header .hover");
    if(!listP || !currentL || !hover) return;
    var listC = Array.prototype.slice.call(listP.children);
    var index = listC.indexOf(currentL) - 6;
    var left = 144; */
    var listP = document.querySelector(".header .center");
    var currentL = document.querySelector(".header .center .on");
    var hover = document.querySelector(".header");
    if(!listP || !currentL || !hover) return;
    var listC = Array.prototype.slice.call(listP.children);
    var index = listC.indexOf(currentL) - 6;
    var left = 100;
    var correct = 0;
    /* console.log(document.documentElement.offsetWidth, document.body.offsetWidth) */
    /* 设置hover初始位置 */
    if(document.body.offsetWidth > 1300) correct = (document.body.offsetWidth - 1300)/2;
    hover.style.backgroundPosition =  index * left - 587 + correct + "px 0px";

    /* mouseover 事件完成hover的移动效果 */
    listP.addEventListener("mouseover", function(e) {
        if(e.target.constructor === HTMLAnchorElement) {
            var target = e.target.parentElement;
            index = listC.indexOf(target) - 6;
            if(document.body.offsetWidth > 1300) correct = (document.body.offsetWidth - 1300)/2
            hover.style.backgroundPosition =  index * left - 587 + correct + "px 0px"
        }
    })

    /* mouseleave 事件完成离开导航时，回到初始位置 */
    listP.addEventListener("mouseleave", function(e) {
        index = listC.indexOf(currentL) - 6;
        if(document.body.offsetWidth > 1300) correct = (document.body.offsetWidth - 1300)/2
        hover.style.backgroundPosition =  index * left - 587 + correct + "px 0px"
    })
})();

/* 首页放大镜图标点击下拉+input提示 */
var showInput = (function() {
    var bool = false;
    var button = document.querySelector(".header .right .pointer");
    var container = document.querySelector(".header .drop");
    var input = document.querySelector(".header .drop .text");
    if(!button || !container || !input) return;

    input.addEventListener("focus", function(){
        if(input.value === "请输入关键词..."){
            input.value = "";
        }
    });
    input.addEventListener("blur", function(){
        if(input.value.trim().length === 0){
            input.value = "请输入关键词...";
        }
    });

    button.addEventListener("click", function() {
        if(bool){
            container.style.height = "0px";
            container.style.padding = "0px 0px"
        } else {
            container.style.height = "35px";
            container.style.padding = "20px 0px"
        };
        bool = !bool
    })
})();

/* join页swiper的切换 */
var joinSwitch = (function() {
    var navP = document.querySelector(".join-advantage-swiper .swiper-wrapper");
    var detailP = document.querySelector(".join-advantage-detail ul");
    if(!navP || !detailP) return;
    var navC = Array.prototype.slice.call(navP.children);
    var detailC = Array.prototype.slice.call(detailP.children);
    var currentN = navC[0];
    var index = 0;
    var width = 1300;

    /* 设置容器ul的宽 */
    detailP.style.width = detailC.length * width + "px";

    navP.addEventListener("click", function(e) {
        if(e.target === currentN) return;
        if(e.target.constructor === HTMLDivElement) {
            currentN = e.target
        } else {
            currentN = e.target.parentElement
        }
        index = navC.indexOf(currentN);
        detailP.style.left = index * -width + "px";
    })
    
})();

/* join的input提示 */
var joinTip = (function() {
    var pin = document.querySelector(".join-apply .pin");
    var parent = document.querySelector(".join-apply form");
    var textarea = document.querySelector(".join-apply textarea");
    if(!pin || !parent || !textarea) return;
    var children = Array.prototype.slice.call(parent.children).slice(0,4);
    children.push(pin);
    textarea.value = "内容";
    
    for(var i=0; i<children.length ; i++) {
        var input = children[i];
        input.text = input.value;
        input.addEventListener("focus", function(e){
            if(e.target.value === e.target.text){
                e.target.value = "";
            }
        });
        input.addEventListener("blur", function(e){
            if(e.target.value.trim().length === 0){
                e.target.value = e.target.text;
            }
        });
    }
})();

/* about品牌历程切换 */
var aboutSwitch = (function() {
    var navP = document.querySelector(".about-process .swiper-wrapper");
    var detailP = document.querySelector(".about-process .text-container ul");
    if(!navP || !detailP) return;
    var navC = Array.prototype.slice.call(navP.children);
    var detailC = Array.prototype.slice.call(detailP.children);
    var currentN = navC[0];
    var width = 860;
    var index = 0;
    var id = 0;

    /* 设置容器ul的宽 */
    detailP.style.width = detailC.length * width + "px";
    detailP.style.left = "0px";

    navP.addEventListener("click", function(e) {
        if(e.target === currentN) return;
        currentN.style.color = "#666666";
        currentN.style.backgroundImage = "url(images/about-process-icon1.png)";

        currentN = e.target;
        index = navC.indexOf(currentN);
        detailP.style.left = index * -width + "px";
        currentN.style.color = "#CD0000";
        currentN.style.backgroundImage = "url(images/about-process-icon2.png)";
    });

    return {

    }
})();

/* pro滚动变色事件,原理获取图片到头部距离，在scroll事件中图片到屏幕一半去掉grayscale */
var proScroll = (function() {
    var imgC = document.querySelectorAll(".pro-main img");
    if(!imgC) return;
    var height,offsetTop;
    imgC = Array.prototype.slice.call(imgC);

    window.addEventListener("scroll", function(e) {
        height = document.documentElement.clientHeight/2;
        for(var i=0; i<imgC.length; i++) {
            offsetTop = imgC[i].offsetTop - height;
            if(offsetTop <= document.documentElement.scrollTop) imgC[i].style.filter = "grayscale(0%)";
        }
    })
})();

/* pro-detail图片切换 */
var magnifier = (function() {
    var navP = document.querySelector(".pd-detail .pd-imgNav ul");
    if(!navP) return;
    var navC = Array.prototype.slice.call(navP.children);
    var currentN = navC[0];

    var imgP = document.querySelector(".pd-detail .left ul");
    var imgC = Array.prototype.slice.call(imgP.children);
    var currentI = imgC[0];
    
    var arrowL1 = document.querySelector(".pd-detail .arrow-left1");
    var arrowR1 = document.querySelector(".pd-detail .arrow-right1");

    var arrowL2 = document.querySelector(".pd-detail .arrow-left2");
    var arrowR2 = document.querySelector(".pd-detail .arrow-right2");
    
    var id = 0;
    var index = 0;
    var width = 112;

    /* 设置ul宽度和定位 */
    navP.style.width = width * navP.children.length + "px";
    navP.style.left = "0px";

    /* 设置导航按钮颜色 */
    if(navC.length <= 4) arrowR2.style.opacity = "0.35";

    /* 大图按钮切换事件添加 */
    arrowL1.addEventListener("click", function(e) {
        magnifier.switch(e.target);
    });
    arrowR1.addEventListener("click", function(e) {
        magnifier.switch(e.target);
    });
    
    /* 左右按钮点击事件,加入节流防止点击过快出现BUG */
    arrowL2.addEventListener("click", function(e) {
        if(id) return;
        magnifier.nav(e.target);
        id = setTimeout(function() {
            id = 0;
            clearTimeout(id)
        }, 320)
        
    });
    arrowR2.addEventListener("click", function(e) {
        if(id) return;
        magnifier.nav(e.target);
        id = setTimeout(function() {
            id = 0;
            clearTimeout(id)
        }, 320)
    });

    /* 导航图片的点击事件 */
    navP.addEventListener("click", function(e) {
        if(e.target.constructor !== HTMLUListElement && currentN !== e.target) {
            currentI.style.display = "none";
            currentN.style.borderColor = "#DCDCDC";
            
            if(e.target.constructor === HTMLLIElement) {
                currentN = e.target
            } else if(e.target.constructor === HTMLDivElement) {
                currentN = e.target.parentElement
            } else {
                currentN = e.target.parentElement.parentElement
            };
            index = navC.indexOf(currentN);
            currentI = imgC[index];
            currentI.style.display = "block";
            currentN.style.borderColor = "#C7000C";
        }
    });

    return {
        /* 导航图片的切换 */
        nav : function(target) {
            if(target === arrowL2) {
                if(navP.offsetLeft === 0) {
                    return
                }else if(navP.offsetLeft === -width) {
                    arrowL2.style.opacity = "0.35";
                } else {
                    arrowL2.style.opacity = "1"
                }
                arrowR2.style.opacity = "1";
                navP.style.left = navP.offsetLeft + width + "px";
            } else {
                if(navP.offsetLeft === (navP.children.length - 4) * -width || navC.length <= 4) {
                    return
                }else if(navP.offsetLeft === (navP.children.length - 5) * -width) {
                    arrowR2.style.opacity = "0.35";
                } else {
                    arrowR2.style.opacity = "1"
                }
                arrowL2.style.opacity = "1";
                navP.style.left = navP.offsetLeft - width + "px";
            }
        },

        /* 大图按钮的切换功能 */
        switch : function(target) {
            var position = parseInt(navP.style.left)/-width;
            if(target === arrowL1) {
                if(index === 0) {
                    return;
                } else {
                    index--;
                    if(position !== 0) {
                        if(navP.offsetLeft === -width) {
                            arrowL2.style.opacity = "0.35";
                        } else {
                            arrowL2.style.opacity = "1"
                        }
                        arrowR2.style.opacity = "1";
                        navP.style.left = navP.offsetLeft + width + "px";
                    }
                }
            } else {
                if(index === navC.length - 1) {
                    return;
                } else {
                    index++;
                    if(position + 3 !== navC.length - 1 && navC.length > 4) {
                        if(navP.offsetLeft === (navP.children.length - 5) * -width) {
                            arrowR2.style.opacity = "0.35";
                        } else {
                            arrowR2.style.opacity = "1"
                        }
                        arrowL2.style.opacity = "1";
                        navP.style.left = navP.offsetLeft - width + "px";
                    }
                }
            }                 
            currentI.style.display = "none";
            currentN.style.borderColor = "#DCDCDC";
            
            currentI = imgC[index];
            currentN = navC[index];
            currentI.style.display = "block";
            currentN.style.borderColor = "#C7000C";
        }
    }
})();

/* contact的input提示 */
var contactTip = (function() {
    var parent = document.querySelector(".contact-main form");
    var textarea = document.querySelector(".contact-main textarea");
    if(!parent || !textarea) return;
    var children = Array.prototype.slice.call(parent.children).slice(0,4);
    textarea.value = "您想了解或要解决的问题...";
    
    for(var i=0; i<children.length ; i++) {
        var input = children[i];
        input.text = input.value;
        input.addEventListener("focus", function(e){
            if(e.target.value === e.target.text){
                e.target.value = "";
            }
        });
        input.addEventListener("blur", function(e){
            if(e.target.value.trim().length === 0){
                e.target.value = e.target.text;
            }
        });
    }
})();
